<template lang="pug">
  .homepart
    div.mbx
      span.ml24 本月销售CRM
      div(@click="$router.push('/operative/crm')")
        span CRM管理
        img(src="@/assets/right.png")
    .quikWrapper
      .quikBox(@click="$router.push('/operative/crm/clue')")
        img.titleIcon(src="~@/assets/operatice-icon1.png")
        b.title 新增线索
        apan {{info.leadsCount || 0}}
      .quikBox(@click="$router.push('/operative/crm/customer')")
        img.titleIcon(src="~@/assets/operatice-icon2.png")
        b.title 新增客户
        apan {{info.clienteleCount || 0}}
      .quikBox(@click="$router.push('/operative/crm/customer')")
        img.titleIcon(src="~@/assets/operatice-icon3.png")
        b.title 新增合同
        apan {{info.contractCount || 0}}
      .quikBox(@click="$router.push('/operative/crm/customer')")
        img.titleIcon(src="~@/assets/operatice-icon4.png")
        b.title 新增跟进
        apan {{info.followCount || 0}}
</template>
<script>
import { crmStatisticsRecord } from '@/api/dashboard.js'
import { getMonthFirst, getMonthLast } from '@/utils/date'
export default {
  data () {
    return {
      info: {}
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      // const month = now.getMonth() + 1
      // const year = now.getFullYear()
      // const nextMonthFirstDay = new Date([year, month + 1, 1].join('-')).getTime()
      // const oneDay = 1000 * 24 * 60 * 60
      // const monthLast = new Date(nextMonthFirstDay - oneDay).getDate()
      const now = new Date()
      const beginDate = getMonthFirst(now)
      const endDate = getMonthLast(now)
      crmStatisticsRecord({ beginDate, endDate }).then(res => {
        console.log(res)
        this.info = res
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.homepart{
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  .mbx{
    padding: 0 !important;
  }
}
.quikWrapper{
  .quikBox{
    + .quikBox{
      margin-top: 10px
    }
    height: 78px !important;
    padding: 15px 24px !important;
    border-radius: 8px !important;
    .titleIcon{
      margin: 0 !important;
    }
    b{
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-left: 40px;
      margin-right: 24px;
    }
    span{
      font-family: Source Han Sans SC, Source Han Sans SC;
      font-weight: bold;
      font-size: 16px;
      color: #000000;
      text-align: left;
      font-style: normal;
      text-transform: none;
      line-height: 0;
    }
  }
  .quikBox:nth-child(1){
    background-color: #F2FEFE !important;
  }
  .quikBox:nth-child(2){
    background-color: #FEFDF9 !important;
  }
  .quikBox:nth-child(3){
    background-color: #F2F7FE !important;
  }
  .quikBox:nth-child(4){
    background-color: #FEF9F9 !important;
  }
}
</style>
